<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Microsoft YaHei", sans-serif;
        }

        h1 {
            text-align: center;
            margin-top: 30px;
            opacity: 0.7;
        }

        .myForm {
            margin: 30px;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
        }

        .myForm input,
        .myForm select {

            margin: 0 10px;
            width: 75px;
            height: 25px;
            border: solid 1px skyblue;
        }

        button {
            margin: 0 10px;
            height: 25px;
            width: 50px;
            background-color: skyblue;
            transition: transform 0.3s ease;
        }

        table,
        th,
        td {
            margin: 10px auto;
            border-collapse: collapse;
            border: solid 1px white;
        }

        tr th {
            height: 40px;
            width: 140px;
            font-size: 24px;
            background-color: skyblue;
            color: white;
        }

        tr td {
            height: 40px;
            width: 140px;
            font-size: 20px;
            background-color: rgb(208, 234, 244);
            text-align: center;
        }

        a {
            color: rgb(72, 72, 72);
            text-decoration: none;
            background-color: orange;
            padding: 3px 6px;
            border-radius: 7px;
        }

        button:hover {
            transform: translateY(100%);
        }


        a:hover {
            color: black;
            padding: 4px 7px;
        }
    </style>
</head>

<body>
    <h1>加入歌单</h1>
    <form action="" class="myForm" autocomplete="on">
        <span>歌曲名称:</span>
        <input type="text" name="name">
        <span>歌手:</span>
        <input type="text" name="singer">
        <span>类型:</span>
        <select name="type">
            <option value="流行">流行</option>
            <option value="抒情">抒情</option>
            <option value="民谣">民谣</option>
        </select>
        <span>热度:</span>
        <input type="text" name="hot">
        <span>平台:</span>
        <select name="platform">
            <option value="qq音乐">qq音乐</option>
            <option value="网易云">网易云</option>
        </select>
        <button>加入</button>
    </form>
    <h1>我的歌单</h1>
    <table>
        <thead>
            <tr>
                <th>歌曲名称</th>
                <th>歌手</th>
                <th>类型</th>
                <th>热度</th>
                <th>平台</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <!-- <tr>
                <td>遇见</td>
                <td>孙燕姿</td>
                <td>抒情</td>
                <td>88</td>
                <td>qq音乐</td>
               <td><a href="">删除</a></td>
            </tr> -->
        </tbody>
    </table>

    <script>
        const sname = document.querySelector('.myForm input[name="name"]');
        const singer = document.querySelector('.myForm input[name="singer"]');
        const type = document.querySelector('.myForm select[name="type"]');
        const hot = document.querySelector('.myForm input[name="hot"]');
        const platform = document.querySelector('.myForm select[name="platform"]');
        const button = document.querySelector('.myForm button');

        const arr = []
        // 用来存放数据，对象数组

        // 1.歌曲录入
        button.addEventListener('click', (e) => {
            //阻止默认行为
            e.preventDefault();
            // 判断不为空
            if (sname.value.trim() === '' || singer.value.trim() === '' || hot.value.trim() === '') {
                alert('请填写完整信息')
                return
            }
            // 判断热门度是否为数字
            id = parseInt(hot.value)
            if (isNaN(id)) {
                alert('热门度必须为数字')
                return
            }
            // 存入数据
            const data = {
                sname: sname.value,
                singer: singer.value,
                type: type.value,
                hot: hot.value,
                platform: platform.value
            }
            // 清空表单
            sname.value = ''
            singer.value = ''
            hot.value = ''
            arr.push(data)
            // console.log(arr)
            render(arr)
        })

        // 2.数据渲染函数
        const table = document.querySelector('table');
        const render = (arr) => {
            // console.log(table.childNodes)
            // 这个玩意会吧文本节点一起放进去，包括标签之间的空格回车之类的
            console.log(table.children)
            table.children[1].innerHTML = ''
            arr.forEach((item, index) => {
                const tr = document.createElement('tr');
                tr.innerHTML = `
                <tr>
                    <td>${arr[index].sname}</td>
                    <td>${arr[index].singer}</td>
                    <td>${arr[index].type}</td>
                    <td>${arr[index].hot}</td>
                    <td>${arr[index].platform}</td>
                   <td><a hrf="">删除</a></td>
                </tr>
                `
                table.children[1].appendChild(tr)
            })
        }

        // 3.删除功能
        table.addEventListener('click', (e) => {
            if (e.target.tagName === 'A') {
                e.target.parentNode.parentNode.remove()
                document.alert('删除成功')
            }
        })
    </script>
</body>

</html>